<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      destroyOnClose
    >
      <!-- <a-form v-if="!childModal" :form="form">
        <a-form-item
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 10 }"
          label="分类名称"
        >
          <a-input
            v-decorator="[
              'classificationName',
              {
                rules: [{ required: true, message: '请输入1-6汉字的分类名称' }],
              },
            ]"
            placeholder="请输入1-6汉字的分类名称"
          />
        </a-form-item>
      </a-form> -->

      <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 10 }" :form="form">
        <a-form-item label="一级分类：" v-if="records.classifyLevel<=3 && childModal">
          <span>{{
            records.add == "add"
              ? records.classificationName1
              : records.grandParentName
          }}</span>
        </a-form-item>
        <a-form-item label="二级分类：" v-if="records.classifyLevel==3 && childModal">
          <span>{{
            records.add == "add"
              ? records.classificationName2
              : records.parentName
          }}</span>
        </a-form-item>

        <a-form-item label="分类名称">
          <a-input
            v-decorator="[
              'classificationName',
              {
                rules: [
                  {
                    required: true,
                    message: records.classifyLevel == 1 ? '请输入1——4字的分类名称' : '请输入1——9字的分类名称',
                    min: 1,
                    max: records.classifyLevel == 1 ? 4 : 9,
                  },
                ],
              },
            ]"
            :placeholder="records.classifyLevel == 1 ? '请输入1——4字的分类名称' : '请输入1——9字的分类名称'"
          />
        </a-form-item>

        <a-form-item v-if="childModal && records.classifyLevel != 1">
          <template slot="label">
            <!-- <span class="ant-form-item-required"> 分类图片 </span> -->
            <span> 分类图片 </span>
          </template>
          <upload-image
            @change="handleChange"
            :fileSizeLimit="1048576"
            v-decorator="[
              'pictureUrl',
              {
                rules: [{ required: records.classifyLevel == 2 ? false : true, message: '分类图片不能为空' }],
              },
            ]"
          ></upload-image>
        <p class="form-tips">支持上传1M以内图片</p>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      fileList: [],
      form: "",
    };
  },
  props: {
    value: {
      require: true,
      default: false,
      type: Boolean,
    },
    title: {
      default: "新增分类",
      type: String,
    },
    childModal: {
      default: false,
      type: Boolean,
    },
    records: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    this.form = this.$form.createForm(this, { name: "coordinated" });
  },
  watch: {
    value(val) {
      console.log(val);
      this.visible = val;
    },
    visible(val) {
      if (val && this.records.id) {
        console.log(this.records)
        this.$nextTick(() => {
          const formItems = this.form.getFieldsValue();
          Object.keys(formItems).forEach((key) => {
            formItems[key] = this.records[key];
          });
          this.form.setFieldsValue(formItems);
        });
      }
      this.$emit("input", val);
    },
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = `/gallery/classification/${this.records.add}`;
          let parmas = {};
          if (this.childModal) {
            parmas.parentId = this.records.id;
          } else {
            parmas.parentId = 0;
          }
          if (this.records.add == "update") {
            parmas.id = this.records.id;
            parmas.parentId = this.records.parentId;
          }
          parmas.classifyLevel = this.records.classifyLevel

          this.$post(url, { ...values, ...parmas }).then((res) => {
            if (res && res.returnCode === 1000) {
              this.$message.success("保存成功！");
              this.$emit("handleSubmit");
            }
          });
        }
      });
      this.confirmLoading = false;
    },
    handleCancel(e) {
      this.visible = false;
    },
    handleChange(info) {
      this.fileList = [info];
    },
  },
};
</script>
